<template>
  <div id="app">
    <keep-alive>
      <transition name="van-slide-right">
        <router-view class="viewBox" />
      </transition>
    </keep-alive>
    <van-tabbar v-if="showTab" route active-color="#DCE775">
      <van-tabbar-item replace to="/" icon="home-o">菜单</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/mine" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
    <Loading
      ref="loader"
      :can-close="canClose"
      :isLoad="flag"
      :msg="msg"
    ></Loading>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { test } from "./controller/MenuList";
export default {
  name: "app",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      flag: (state) => state.ShopCenter.tipFlag,
      msg: (state) => state.ShopCenter.tipMsg,
      canClose: (state) => state.ShopCenter.canClose,
      showTab: (state) => state.Tabar.isTabar,
    }),
  },
  created() {},
  methods: {
    handlerTest() {
      // this.$refs.loader.showLoading()
    },
  },
};
</script>

<style lang="less">
@primary-color: #f39c12;
@dark-color: #424242;
@live-color: #dce775;
@font-face {
  font-family: "TakeCo";
  src: url("./assets/static/锐字奥运精神拼搏简.ttf");
}
:root {
  --tabar-hight: 60px;
}
.mid-img {
  display: block;
  object-fit: cover;
  width: 18.75rem;
  height: 18.75rem;
}
.radius-9 {
  border-radius: 0.5625rem;
}
.sm-font {
  font-size: 0.8125rem;
}
.mar-auto {
  margin: 0 auto;
}
.mar-9 {
  margin: 0.5625rem;
}
.padding-16 {
  box-sizing: border-box;
  padding: 1rem;
}
.mar-3 {
  margin: 0.1875rem;
}
.marT-16 {
  margin-top: 1rem;
}
.borderBox {
  box-sizing: border-box;
}
.row-item {
  display: flex;
  align-items: center;
  background-color: #fafafa;
}
.row-main {
  justify-content: space-between;
}
.row-xmain {
  justify-content: center;
}
.row-ymain {
  display: flex;
  align-items: center;
}
.icon-sty {
  width: 1.5625rem;
  height: 1.5625rem;
  object-fit: cover;
  display: inline-block;
}
.demo {
  font-family: "TakeCo";
  font-weight: 300;
  box-sizing: border-box;
}
.viewBox {
  height: calc(100vh - var(--tabar-hight) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--tabar-hight) - env(safe-area-inset-bottom));
  overflow-y: scroll;
  // box-sizing: border-box;
  background-color: #fafafa;
}
.van-stepper--round .van-stepper__plus,
.van-stepper--round .van-stepper__minus {
  background-color: #dce775 !important;
}
.van-stepper__minus {
  color: #fff !important;
  border: 1px solid #fff !important;
}
// 卡片
.card {
  height: 13.75rem;
  // background-color: #f39c12;
  display: flex;
  flex-wrap: wrap;
}
.card-cell:nth-child(1) {
  flex: 6;
}
.card-cell {
  flex: 3;
  margin: 0.1875rem;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.1875rem;
}
.cell-item {
  // background-color: bisque;
  flex: 1;
  margin: 0.09375rem;
  position: relative;
}
</style>
